<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_一个重要的内置关系</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        1.VueComponent.prototype.__proto__ === Vue.prototype
        2.为什么要有这个对应关系？
            -让组件实例对象（vc）可以访问到Vue原型上的属性、方法
     -->
    <!-- 准备一个容器 -->
    <div id="root">
        姓名：{{name}}
        <hr>
        <h2>见本文件夹的《对应3文件的图示.png》</h2>
    </div>

    <script type="text/javascript">

        function Demo() {
            this.a = 1,this.b = 2
        }

        let d = new Demo()
        /**
         * Demo.prototype //显式原型属性
         * d.__proto__  // 隐私原型属性
         * 
         *  上面的两个属性对应内存引用是同一个，修改任意一个的值另一个也会改变
         * 
         * VueComponent.prototype.__proto__ === Vue.prototype
         */
        new Vue({
            el:'#root',
            data(){
                return{
                    name:"张三"
                }
            },
        })
    </script>
</body>

</html>